<!DOCTYPE html>

<html>
<head>
    <!-- 声明使用utf-8编码 -->
    <meta http-equiv="content-type" content="txt/html; charset=utf-8" />

    <!-- 使用EL表达式(${app_path})查出项目路径 -->
    <!-- jquery 核心 JavaScript 文件 -->
    <script src="/static/js/jquery-3.5.1.min.js"></script>
    <!-- Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <!-- Bootstrap 核心 JavaScript 文件 -->
    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!-- Bootstrap alert 扩展 JavaScript 文件 -->
    <script src="/static/bootstrap-alert-extend/bootstrap-alert-extend.js"></script>
    <!-- JQuerySession 扩展 JavaScript 文件 -->
    <script src="/static/js/jquerysession.js"></script>
    <!-- 工具函数 JS 文件 -->
    <script src="/static/js/util.js"></script>
    <!-- 接口url链接 JS 文件 -->
    <script src="/static/js/urlInterface.js"></script>
    <!-- 信息码 JS 文件 -->
    <script src="/static/js/statusCode.js"></script>

    <title>登录页面</title>

    <style type="text/css">

        /*div[class|=col]{*/
        /*    border: 1px solid;*/
        /*}*/

        .form-control {
            height: 40px;
        }

    </style>
</head>

<body>
<div class="container-fluid">
    <div class="modal fade" tabindex="-1" role="dialog" id="loginModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
<!--                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
                    <!--登录标题-->
                    <div class="rows">
                        <div class="col-sm-6 col-sm-offset-3">
                            <h2 class="text-center">用户登录</h2>
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <!--登录表单-->
                    <div class="row" style="margin-top: 20px;">
                        <div class="col-sm-6 col-sm-offset-3">
                            <form id="login_form">
                                <div class="form-group">
                                    <label for="username">用户名：</label>
                                    <input type="text" class="form-control" name="username" id="username"
                                           placeholder="请输入用户名">
                                </div>
                                <div class="form-group">
                                    <label for="password">密码：</label>
                                    <input type="password" class="form-control" name="password" id="password"
                                           placeholder="请输入密码">
                                </div>
                            </form>
                            <button id="login_btn" class="btn btn-primary"
                                    style=" margin-top:10px;float:left;width: 40%;">登录
                            </button>
                            <button id="to_register_btn" class="btn btn-info" style=" margin-top:10px;float:right;width: 40%;">注册</button>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
<!--                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
<!--                    <button type="button" id="test_btn" class="btn btn-info">test button</button>-->
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<script>
    $(function () {
        //初始化页面
        initPage();
        //给按钮绑定事件
        bindOnEvent();
    });

    /**
     * 该方法用于在网页刚加载完时进行初始化操作
     */
    function initPage() {

        //提示当前状态
        alertByStatusCode();

        //弹出登录模态框
        $('#loginModal').modal({
            show: true,
            backdrop: 'static'
        });
    }

    /**
     * 该方法用于给控件绑定事件
     */
    function bindOnEvent() {
        //设置测试按钮的点击事件
        // $("#test_btn").click(function () {
        //     alertUtil.message("<strong>点了一下按钮</strong>","info");
        //     let userData = {
        //         username : "admin",
        //         password : "admin"
        //     };
        //     let userJsonData = JSON.stringify(userData);
        //
        //     console.log("数据为：" );
        //     console.log(userData);
        //     $.ajax({
        //         url: "http://localhost:9002/loginByInfo",//非Rest
        //         data: userJsonData,
        //         contentType: 'application/json;charset=utf-8',
        //         type: "POST",
        //         //请求成功后的回调函数
        //         //result是请求成功后返回的Json结果
        //         success: function (result) {
        //             //先控制台打印结果
        //             console.log(result);
        //             //弹框提示
        //             if (result.code == 200) {//200为成功，400为失败
        //                 alertUtil.message("<strong>登录成功：</strong>" + result.msg);
        //                 let accessToken = result.dataMap.accessToken;
        //             } else {
        //                 alertUtil.message("<strong>登录失败：</strong>" + result.msg, "danger");
        //             }
        //         }
        //     });
        // });

        //设置登录按钮的点击事件
        $("#login_btn").click(function () {
            let userDataString = $("#login_form").serialize();
            let userData = {
                username : $("#login_form input[name='username']").val(),
                password : $("#login_form input[name='password']").val()
            };
            let userJsonData = JSON.stringify(userData);
            
            console.log("表格数据为：" + userDataString);
            $.ajax({
                url: loginInterface,//非Rest
                data: userJsonData,
                contentType: 'application/json;charset=utf-8',
                type: "POST",
                //请求成功后的回调函数
                //result是请求成功后返回的Json结果
                success: function (result) {
                    //先控制台打印结果
                    console.log(result);
                    //弹框提示
                    if (result.code == 200) {//200为成功，400为失败
                        alertUtil.message("<strong>登录成功：</strong>" + result.msg);
                        let accessToken = result.dataMap.accessToken;

                        sessionStorage.setItem("accessToken",accessToken);//设置accessToken

                        window.location.href = to_index;
                    } else {
                        alertUtil.message("<strong>登录失败：</strong>" + result.msg, "danger");
                    }
                },
                error: function () {
                    alertUtil.message("<strong>警告！</strong>服务器后端未响应！", "danger");
                }
            });
        });

        //设置跳转到注册按钮的点击事件
        $("#to_register_btn").click(function () {
            window.location.href = to_register;
        });
    }
</script>

</html>
